<script setup lang="ts">
import { computed, reactive, ref, inject } from 'vue';
import type { PropType } from 'vue'
import { useRouter } from 'vue-router';
import type { Cate } from '../types/types.d.ts'

const cates = inject('cates') as Cate[]
const catesMore = cates.slice(5)
const router = useRouter()
const bgList = reactive([
    '/assets/imgs/techbg.jpg',
    '/assets/imgs/edubg.jpg',
    '/assets/imgs/eco.jpg',
    '/assets/imgs/epidemic.jpg',
    '/assets/imgs/disaster.jpg',
    '/assets/imgs/envbg.jpg',
    '/assets/imgs/societybg.jpg',
    '/assets/imgs/medicalbg.jpg'
])

function goback() {
    router.go(-1)
}
</script>

<template>
    <div class="more">
        <div class="goback" @click="goback()">
            <el-icon color="#f5900a">
                <ArrowLeftBold />
            </el-icon>
        </div>
        <div class="cates">
            <div class="cate-title unselectable">
                <div class="title-1">
                    <div class="title-en font-xbs">
                        FIND TOPICS
                    </div>
                    <div class="title-zh font-xbs">
                        栏目
                    </div>
                </div>
            </div>
            <div class="cate-line font-xbs"></div>
            <img src="/assets/imgs/arrow.png" class="cate-arrow unselectable" alt="" style="height: 20px;" />
            <div class="option-area">
                <div class="first-row">
                    <div class="cate-choice" :style="{'background-image': 'url('+bgList[0]+')'}" @click="router.push('/cate/' + cates[0].id)">
                        <div class="title">{{ cates[0].name }}</div>
                    </div>
                    <div class="cate-choice" :style="{'background-image': 'url('+bgList[1]+')'}" @click="router.push('/cate/' + cates[1].id)">
                        <div class="title">{{ cates[1].name }}</div>
                    </div>
                </div>
                <div class="second-row">
                    <div class="cate-choice" :style="{'background-image': 'url('+bgList[2]+')'}" @click="router.push('/cate/' + cates[2].id)">
                        <div class="title">{{ cates[2].name }}</div>
                    </div>
                    <div class="cate-choice" :style="{'background-image': 'url('+bgList[3]+')'}" @click="router.push('/cate/' + cates[3].id)">
                        <div class="title">{{ cates[3].name }}</div>
                    </div>
                    <div class="cate-choice" :style="{'background-image': 'url('+bgList[4]+')'}" @click="router.push('/cate/' + cates[4].id)">
                        <div class="title">{{ cates[4].name }}</div>
                    </div>
                </div>
                <div v-for="(item,index) in catesMore" :style="{'background-image': 'url('+bgList[index+5]+')'}" class="cate-choice cate-more"  @click="router.push('/cate/' + cates[index+5].id)" :key="index">
                    <div class="title">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.title-2 {
    position: relative;
    top: 10px;
}

.title-zh {
    font-size: 30px;
}

.title-en {
    letter-spacing: 1px;
    color: #f59009;
    font-size: 18px;
}

.title-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cate-title {
    display: flex;
}

.cate-arrow {
    margin-top: 30px;
}

.cate-line {
    margin-top: 20px;
    height: 1px;
    background-color: #fbdcbe;
    width: 50%;
}

.cates {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.goback {
    width: 40px;
    height: 40px;
    background-color: white;
    box-shadow: #475669 1px 1px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 100px;
    cursor: pointer;
    flex-shrink: 0;
}

.option-area {
    margin-top: 30px;
    width: 65%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 35px;
}

.first-row,
.second-row {
    display: flex;
    width: 100%;
    gap: 35px;
}

.first-row>div {
    flex: 1;
    height: 50vh;
    width: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.cate-more {
    width: 100%;
    height: 25vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.title {
    background-color: rgba(197, 197, 197, 0.877);
    width: fit-content;
    height: fit-content;
    padding: 6px 30px;
    font-size: 2em;
    font-weight: 600;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.cate-choice {
    cursor: pointer;
}

.second-row > div {
    /* background-color: #f5900a; */
    flex: 1;
    height: 50vh;
    width: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.first-row > div:hover,
.second-row > div:hover,
.cate-more:hover{
    box-shadow: 6px 20px 7px grey;
}
</style>